<template>
  <div class="outfit_mian">
    <div class="outfit_row">
      <div class="outfit_box">
        <el-steps align-center :active="active" finish-status="success">
          <el-step title="使用介绍"></el-step>
          <el-step title="报图须知"></el-step>
          <el-step title="致搭建商的一封信"></el-step>
          <!-- <el-step title="保险管理规定"></el-step>
          <el-step title="搭建服务群"></el-step> -->
        </el-steps>
        <!-- <div>
          <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        </div> -->
        
      </div>
      <div class="outfit_box">
        <mine @next="next" v-if="active == 0"></mine>
        <notice @next="next" v-if="active == 1"></notice>
        <security @next="next" v-if="active == 2"></security>
        <!-- <regulations @next="next" v-if="active == 3"></regulations>
         <mincode @next="next" v-if="active == 4"></mincode> -->
      </div>
    </div>
  </div>
</template>
<script>
import mine from '@/components/outfit/exam/mineimg.vue'
import notice from '@/components/outfit/exam/notice.vue'
import security from '@/components/outfit/exam/security.vue'
import regulations from '@/components/outfit/exam/regulations.vue'
import mincode from '@/components/outfit/exam/code.vue'
import { getToken } from '../../utils/auth'
export default {
  components:{
    mine,
    notice,
    security,
    regulations,
    mincode
  },
  data() {
    return {
      active: 0,
    };
  },
  created(){
    let next = getToken('drawing')
    if(next){
      this.$router.push('/drawingsBoothConfirm')
    }
  },
  methods: {
    next(index) {
     this.active = index
    },
  },
};
</script>
<style scoped>
.outfit_mian {
  background-color: #f2f2f2;
}
.outfit_row {
  padding: 10px;
}
.outfit_box {
  width: 1000px;
  margin: auto;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-bottom: 30px;
}
</style>